import React, { Component } from 'react';
import { Layout, Menu, Icon, Button, Avatar } from 'antd';
import { Link, Route, Switch, Redirect } from 'react-router-dom';
import { Breadcrumb } from 'antd';
import classifyList from './classifyList';
import addList from './addList';

const { Sider } = Layout;
const SubMenu = Menu.SubMenu;
const windowHeight = window.innerHeight;

const styles = {
  Sider: {
    overflow: 'auto',
    height: '100vh',
    position: 'fixed',
    left: 0,
  },
  Content: {
    background: '#fff',
    padding: 15,
    margin: '10px 10px 0px',
    marginLeft: 210,
    minHeight: windowHeight,
    overFlow: 'initial',
  },
}

class Mine extends Component {
  constructor(props){
    super(props);
    this.state = {
      current: '1',
    }
  }

  handleClick = (e) => {
    this.setState({
      current: e.key,
    });
  }


  render() {
    return (
      <div style={{ marginTop: 50 }}>
        <Layout>
          <Sider theme="light" style={styles.Sider}>
          <Menu
            onClick={this.handleClick}
            style={{ width: 256 }}
            defaultOpenKeys={['sub1']}
            selectedKeys={[this.state.current]}
            mode="inline"
          >     
          <SubMenu key="sub1" title={<span><Icon type="mail" /><span>知识点</span></span>}>
            <Menu.Item key="1">
              <Link to="/mine/classifyList">我的知识点</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/mine/addList">添加知识点</Link>
            </Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigtion Two</span></span>}>
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
          </SubMenu>
          </Menu>
          </Sider>
          <Layout style={styles.Content}>
            <Switch>
              <Route path="/mine/classifyList" component={classifyList} />
              <Route path="/mine/:addList" component={addList} />
            </Switch>
          </Layout>
        </Layout>
      </div>
    );
  }
}
  
  export default Mine;